<!DOCTYPE html>
<html>
  @include('layout.header')

  <body class="login-layout">
    <div class="login-header">
      <div class="login-header-image" style="background-image:url('/assets/images/login/login-{{$rNum}}.jpg');"></div>
      <div class="main-content">
        <div class="row login-body">
          <div class="col-xs-12 col-sm-6"></div>
          <div class="col-xs-12 col-sm-4">

            <div class="login-container">

              <div class="position-relative">
                <div id="login-box" class="login-box visible widget-box no-border">
                  <div class="widget-body">
                    <div class="widget-main">

                      <h4>
                        <img src="/assets/images/logo.fw.png" style="height:45px;" />
                      </h4>

                      <div class="space-6"></div>

                      <form id="login-form">
                        {{ csrf_field() }}
                        <fieldset>
                        <div class="form-group">
                          <label class="block clearfix">
                            <span class="block input-icon">
                              <input name="username" type="text" class="form-control" placeholder="用户名" />
                              <i class="ace-icon fa fa-user"></i>
                            </span>
                          </label>
                        </div>

                        <div class="form-group">
                          <label class="block clearfix">
                            <span class="block input-icon">
                              <input name="password" type="password" class="form-control" placeholder="密码" />
                              <i class="ace-icon fa fa-lock"></i>
                            </span>
                          </label>
                        </div>

                        <div class="form-group">
                          <label class="clearfix">
                            <span class="block input-icon pull-left">
                              <input name="captcha" type="text" class="form-control login-captcha" placeholder="验证码" autocomplete="off" maxlength="4" />
                              <i class="ace-icon fa fa-shield"></i>
                            </span>
                            <div class="block captcha-code pull-left"><img src="{{route('util.captcha')}}" id="captcha_code" /></div>
                          </label>
                        </div>

                          <div class="clearfix">

                            <button type="submit" class="pull-right btn btn-primary">
                              <i class="ace-icon fa fa-check"></i>
                              <span class="">登录</span>
                            </button>
                          </div>

                          <div class="space-6"></div>
                        </fieldset>
                      </form>

                      <div class="social-or-login center">
                        <span><a href="http://www.beian.miit.gov.cn/" target="_blank">湘ICP备15012102号-1</a></span>
                      </div>
                      <div class="space-20"></div>
                      <div class="center">
                        <span>&copy 2008-2020 长沙琴岛演艺中心</span>
                      </div>
                      <div class="center">
                        <span></span>
                      </div>

                    </div><!-- /.widget-main -->

                  </div><!-- /.widget-body -->
                </div><!-- /.login-box -->
              </div><!-- /.position-relative -->

            </div>
          </div><!-- /.col -->
        </div><!-- /.row -->


      </div><!-- /.main-content -->
    </div><!-- /.main-container -->

    <!-- basic scripts -->

    @include('layout.javascript')
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/localization/messages_zh.min.js"></script>

    <script type="text/javascript">
      $(function() {

        $("input[name='username']").focus();

        $('#captcha_code').on('click', function() {
          $(this).attr('src', '/captcha/' + 100 * Math.random());
        });


        /**
        表单前端验证
        */
        $("#login-form").validate({
          rules:{
            username: 'required',
            password: 'required',
            captcha: {
              required: true,
              digits: true
            }
          },
          messages:{
            username: '请输入用户名',
            password: '请输入密码',
            captcha: {
              required: '请输入验证码',
              digits: '验证码格式不正确'
            }
          },


          /* 失去焦点时不验证 */
          onfocusout: false,

          errorElement: 'div',
          errorClass: 'help-block',

          success: function (e) {
            $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
            $(e).remove();
          },

          showErrors: function (errorMap, errorList) {
              $.each(errorList, function (i, v) {
                  layer.tips(v.message, v.element, { tips:3, time: 2000 });
                  //$(v.element).closest('.form-group').removeClass('has-info').addClass('has-error');
                  return false;
              });

          },

          submitHandler: function(form) {
            var token = $("input[name='_token']").attr('value');
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            var captcha = $("input[name='captcha']").val();

            $.post('/login', {
              '_token':token,
              'username': username,
              'password':password,
              'captcha': captcha
            }, function(data) {
              //layer.msg(data.message, { shift: -1 }, function(){
                  if(data.status === true && data.url != null ){
                    $(window).attr('location', data.url);
                  }
                //});

              },'json').error(function(data){
                layer.msg(data.responseJSON.message);
              });
          }

        });

      });
    </script>

  </body>
</html>
